<template>
	<view class="box">
		<!-- #ifdef MP-WEIXIN -->
		<view class="custom_box">
			<image class="bgss" :src="baseUrl + '/static/commonimg/bgImg.jpg'" mode="aspectFill"
				:style="{height: statusBarHeight + titleHeight+5 + 'px'}"></image>
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view class="custom_addrress" :style="{height: titleHeight + 'px'}">
				<view class="bar_address flex_dq" @click="gosearchadd">
					<image class="dws" :src="baseUrl +  '/static/icon/i_dw.png'" mode="aspectFill"></image>
					<text>{{cityName}}</text>
				</view>
				<view class="bar_input flex_dq">
					<image @click="isScanCode" class="sms" :src="baseUrl + '/static/icon/i_sm.png'" mode="aspectFill">
					</image>
					<text class="camouflage" @click="goSearch">请输入</text>
				</view>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view class="custom_box">
			<image class="bgss" :src="baseUrl + '/static/commonimg/bgImg.jpg'" mode="aspectFill"
				:style="{height: statusBarHeight + titleHeight+5 + 'px'}"></image>
			<view class="custom-nav" :style="{height:titleHeight + statusBarHeight + 'px'}">
				<view class="custom_addrress"
					:style="{height: titleHeight + 'px',paddingTop: btnInfoTop + 15  + 'px' }">
					<view class="bar_address flex_dq" @click="gosearchadd">
						<image class="dws" :src="baseUrl +  '/static/icon/i_dw.png'" mode="aspectFill"></image>
						<text>{{cityName}}</text>
					</view>
					<view class="bar_input flex_dq">
						<image @click="isScanCode" class="sms" :src="baseUrl + '/static/icon/i_sm.png'"
							mode="aspectFill">
						</image>
						<text class="camouflage" @click="goSearch">请输入</text>
					</view>
				</view>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="sticky_box">
			<image :src="baseUrl +'/static/commonimg/bgImg.jpg'" mode="aspectFill"></image>
			<view class="sticky_top flex_dq">
				<view class="bar_address flex_dq" @click="gosearchadd">
					<image class="dws" :src="baseUrl +'/static/icon/i_dw.png'" mode="aspectFill"></image>
					<text>{{cityName}}</text>
				</view>
				<view class="bar_input flex_dq">
					<image class="sms" :src="baseUrl +'/static/icon/i_search.png'" mode="aspectFill">
					</image>
					<text class="camouflage" @click="goSearch">请输入</text>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<view class="noticebar_box">
			<image :src="baseUrl + '/static/commonimg/mask2.png'" mode="aspectFill"></image>
			<view class="swipers">
				<u-swiper :list="swiperList" keyName="image" imgMode="heightFix" bgColor="transparent" circular
					@click="gonext"></u-swiper>
			</view>
			<view class="noticeBar">
				<image class="" :src="baseUrl + '/static/image/notice.png'" mode="aspectFill"
					style="width: 86rpx;height: 80rpx;z-index: 99;">
				</image>
				<!-- #ifdef MP-WEIXIN -->
				<u-notice-bar class="noticemain" :text="noticeList" step mode="none" bgColor="#F9F0D6" fontSize="14"
					color="#FFC300" @click="clickNotice"></u-notice-bar>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY ||  H5  -->
				<u-notice-bar :text="noticeList" icon='' step mode="none" bgColor="#F9F0D6" fontSize="14"
					color="#FFC300" @click="clickNotice"></u-notice-bar>
				<!-- #endif -->

			</view>
		</view>
		<view style="width: 750rpx;position: relative;z-index: 1;">
			<view class="u-demo-block">
				<u-scroll-list indicatorActiveColor="#FFC300">
					<view class="scroll-list">
						<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
							<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
								@click="sel(item1)"
								:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
								<image class="scroll-list__line__item__image" :src="item1.icon" mode="aspectFill">
								</image>
								<text style="text-align: center;"
									class="scroll-list__line__item__text">{{ item1.name }}</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="flex_ld zhicang">
			<view class="swipershop" v-if="leftadvList.length>0">
				<u-swiper :list="leftadvList" keyName="icon" imgMode="heightFix" bgColor="transparent" circular
					@click="clickshop"></u-swiper>
			</view>
			<view class="shop_right" v-if="rightadvList.length>0">
				<image v-for="(item,index) in rightadvList" :key="index" @click="clickrightshop(item)" :src="item.icon"
					mode="aspectFill"></image>
			</view>
		</view>
		<!-- 吸顶位置 -->

		<view class="stickys" :style="{top: topHeight + 'px',background:isSticky?'#ffffff':''}">
			<SortFilter ref="sort" :isSticky='isSticky' :list='tablist' :sortList='sortList' :topHeight='topHeight'
				@changescroll='pageScroll()' @change='changesort'>
			</SortFilter>
		</view>

		<!-- 店铺列表 -->

		<!-- dynamicStyle -->
		<view id="shopList">
			<view class="mainlist" v-for="item in goodsList" :key="item.id" @click="goMerchantHome(item.id)">
				<image class="images" :src="item.cover" mode="aspectFill"></image>
				<view class="mainright">
					<view class="name">
						{{item.name}}
					</view>
					<view class="detail">
						<view class="wraps">
							距您{{item.distance?item.distance:"999"}}km内 {{item.classify_name}} {{item.address}}
						</view>
					</view>
					<view class="rate">
						<view class="">
							<image class="tagimage" :src="item.attach.seller_level.name_image" mode="widthFix"></image>
							<image class="rateimg" v-for="item1 in item.attach.seller_level.level_data.image_data"
								:src="item1" mode="aspectFill"></image>
						</view>
						<!-- <u-rate readonly size="20" v-model="item.evaluate_rate" active-color="#FFC300"></u-rate> -->
						<text class="c6 f24" v-if="item.sales_volume!=0">
						 已售 {{
						    item.sales_volume_text
						  }}
						</text>
					</view>
					<view class=" flex_dq" v-if="item.is_marketing">
						<image class="manzeng" :src="baseUrl+ '/static/image/manz2.png'" mode="aspectFill"></image>
					</view>
					<view class="itemss" v-if="item.goods.length>0" v-for="item1 in  item.goods  " :key="item1.id">
						<view class="wrapleft">
							<view class="tag">团</view>
							<text class="price">￥{{item1.price}}</text>
							<text class="content"> {{item1.name}}</text>
						</view>
						<view class="jifen">
							+{{item1.integral_proportion}}%More值
						</view>
					</view>
					<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='1'">
						<view class="wrapleft">
							<view class="tag2">快</view>
							<text class="price">快捷买单</text>
						</view>
						<view class="jifen">
							+{{item.quick_integral_proportion}}%More值
						</view>
					</view>
					<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='0'">
						<view class="wrapleft">
							<view class="tag3">到</view>
							<text class="price">到店消费</text>

						</view>
					</view>
				</view>

			</view>
			<noDatas :xxxList="goodsList" :status="status"></noDatas>
			<view class="empty3"></view>
		</view>



		<view class="realName_box flex_dq" v-if="closeReal">
			<view class="realName flex_ld" v-if="!userReal">
				<view class=" flex_dq">
					<!-- <u-icon class="btn_gb" name="close" color="#ffffff" size="18" @click="closeReal = false"></u-icon> -->
					<text class="f28 c0">您尚未实名认证</text>
				</view>
				<text class="realname_txt" @click="goRealName">去实名</text>
			</view>
		</view>

		<u-popup :show="phoneShow" mode="center" @close="phoneShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">温馨提示</text>
				<text class="prompt_tit">本服务为第三方优惠代订服务，进入页面需完成手机号登录验证。如过程中遇到问题，可随时联系在线客服获取帮助</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="phoneShow = false">再想想</text>
					<text @click="gobynnext">继续</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import bynView from '@/components/byn-webview/byn-webview.vue'
	import {
		notices
	} from "../../api/cloudMall.js"
	import {
		// classifyindex,
		classifyList,
		slider,
		recommendSeller,
		bynList,
		bynDetail,
		localAdvList
	} from '../../api/local.js';
	import {
		geocoder
	} from "../../api/other.js"
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				titleHeight: 0, // 标题栏高度
				btnInfoTop: 0, //小程序胶囊距离顶部的距离
				baseUrl: this.$imageBaseUrl,
				cityName: '开启定位', //城市
				duration: '',
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				menuArr: [],
				swiperList: [{
					image: ""
				}],
				tablist: [{
						label: "全部分类",
						type: "cascader",
						select: false
					},
					{
						label: "距离优先",
						type: "text",
						sort_type: 2,
						select: false
					},
					{
						label: "信誉优先",
						type: "text",
						sort_type: 5,
						select: false,
					}
				],
				value: 3,
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				latitude: "",
				longitude: "",
				sort_type: "",
				goodsList: [],
				types: '2',
				closeReal: false,
				userReal: 0,
				h5TopHeight: '0',
				noticeList: [],
				targetPosition: 0,
				sortList: [{
					name: "全部分类",
					children: [{
						id: '',
						name: "全部分类"

					}]
				}],
				phoneShow: false,
				bynid: "",
				isSticky: false, //是否吸顶了
				miniapp_url: "",
				classify_id: "",
				max_distance: "",
				leftadvList: [],
				rightadvList: []
			}
		},
		computed: {
			topHeight() {
				// #ifdef MP-WEIXIN || MP-ALIPAY
				return (this.statusBarHeight + this.titleHeight)
				// #endif
				// #ifdef H5
				return this.h5TopHeight
				// #endif
			},
		},
		onPageScroll(res) {
			var that = this
			// #ifdef MP-WEIXIN || H5
			let query = uni.createSelectorQuery().in(that);
			// #endif
			// #ifdef MP-ALIPAY
			let query = uni.createSelectorQuery();
			// #endif
			query.select('.stickys').boundingClientRect((rect) => {
				if (rect.top <= that.topHeight) {
					that.isSticky = true
				} else {
					that.isSticky = false
				}
			}).exec()
		},
		onReady() {
			// #ifdef MP-ALIPAY 
			let navbarInfo = JSON.parse(uni.getStorageSync("navbarInfo"))
			this.statusBarHeight = navbarInfo.statusBarHeight;
			this.btnInfoTop = navbarInfo.btnInfoTop;
			this.titleHeight = navbarInfo.titleHeight;
			// #endif
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight;
					const btnInfo = uni.getMenuButtonBoundingClientRect()
					this.titleHeight = (btnInfo.top - this.statusBarHeight) * 2 + btnInfo.height
				}
			})
			// #endif

			// #ifdef H5
			uni.createSelectorQuery().select('.sticky_box').boundingClientRect(data => {
				console.log(Number(data.height) * 2)
				this.h5TopHeight = Number(data.height)
				console.log('获取顶部高度--', this.h5TopHeight)
			}).exec()
			// #endif
		},
		onLoad() {
			// 获取必应鸟分类
			// this.getbynlist()
			// 获取全部分类
			this.getclassifyList()
			// 获取广告位
			this.getlocalAdvList()
			this.getswiperlist()
			if (uni.getStorageSync("longitude")) {
				this.latitude = uni.getStorageSync("latitude")
				this.longitude = uni.getStorageSync("longitude")
				this.getlist()
			} else {
				
				this.sss()
			}
			this.initNotices()
		},

		onShow() {
			if (uni.getStorageSync("cityName")) {
				this.cityName = uni.getStorageSync("cityName")
			}
			if (uni.getStorageSync('token')) {
				this.closeReal = true
			}
			if (uni.getStorageSync('userReal')) {
				this.userReal = uni.getStorageSync('userReal')
			}
			if (uni.getStorageSync("longitude")) {
				this.latitude = uni.getStorageSync("latitude")
				this.longitude = uni.getStorageSync("longitude")
				this.page = 1
				this.getlist()
			} else {

				this.sss()
			}
			// if (uni.getStorageSync('addressInfo')) {
			// 	this.cityName = uni.getStorageSync('addressInfo').city
			// }

		},

		methods: {
			pageScroll() {
				uni.pageScrollTo({
					duration: 100, // 滚动动画时长（毫秒，可选）
					selector: ".stickys",
					success: () => {
						console.log(123);
						this.$refs.sort.open()
					}
				});
			},

			changesort(data) {
				console.log(data);
				this.tablist = this.tablist.map((item, index) => {
					return {
						...item,
						select: this.tablist[data.index].type != 'text' ? (data.index == index ? true : item.select) 
							: item.type == 'text' ? (data.index == index ? true : false) : item.select,
						label: data.label && data.index == index ? data.label : item.label
					}
				})
				console.log(this.tablist);
				if (data.sortType) {
					this.types = data.sortType
				}
				if (data.id!=null) {
					this.classify_id = data.id
				}
				this.page = 1
				this.getlist()
			},
			clickshop(index) {
				console.log(index);
				let lunboInfo = this.leftadvList[index];
				if (lunboInfo.platform == 2) { //必应鸟
					this.phoneShow = true
					this.bynid = lunboInfo.id
				} else {
					uni.navigateTo({
						url: "/pagesMy/groundCat/fdmshop"
					})
				}
			},
			clickrightshop(item) {
				if (item.platform == 2) { //必应鸟
					this.phoneShow = true
					this.bynid = item.id
				} else {
					uni.navigateTo({
						url: "/pagesMy/groundCat/groudcatindex?pid=" + item.classify_id
					})
				}
			},
			getlocalAdvList() {
				localAdvList().then(res => {
					console.log(res, '广告位');
					if (res.code == 1) {
						// #ifdef H5
						this.leftadvList = res.data.left_adv || []
						this.rightadvList = res.data.right_adv || []
						let array = res.data.kong_adv
						// #endif
						// #ifdef MP-ALIPAY || MP-WEIXIN
						this.leftadvList = res.data.left_adv || []
						this.rightadvList = res.data.right_adv || []
						let array = res.data.kong_adv.filter(item => item.platform != 2)
						// #endif
						// 数组长度
						let length = array.length;
						// 计算第一个数组的长度
						let firstArrayLength = Math.ceil(length / 2);
						// 使用 slice 分割数组
						let firstArray = array.slice(0, firstArrayLength);
						let secondArray = array.slice(firstArrayLength);
						this.menuArr.push(firstArray, secondArray)

					}
				})
			},


			// getastoreList(sortdata) {
			// 	this.classify_id = sortdata.sortValue0
			// 	this.max_distance = sortdata.sortValue1,
			// 		this.types = sortdata.sortValue2
			// 	this.page = 1
			// 	this.getlist()
			// },
			getclassifyList() {
				classifyList().then(res => {
					if (res.code == 1) {
						this.sortList = this.sortList.concat(res.data)
					}

				})
			},
			clickNotice() {
				uni.navigateTo({
					url: "/pageDao/Dao/noticelist?type=2"
				})

			},
			initNotices() {
				notices({
					page: 1,
					type: 2
				}).then(res => {
					console.log('公告', res)
					if (res.code == 1) {
						let oldNotice = res.data.data;
						console.log(oldNotice);
						let newLsit = [];
						oldNotice.forEach((item, index) => {
							newLsit.push(item.title)
						})
						console.log(newLsit);
						this.noticeList = newLsit
					}
				})
			},
			goRealName() {
				uni.navigateTo({
					url: "/pageUser/myuser/realname"
				})
			},
			gosearchadd() {
				uni.navigateTo({
					url: "/pagesMy/groundCat/searchadd"
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pagesMy/cloudCat/secondLevelSearch?type=1"
				})
			},
			// 扫码
			isScanCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					// onlyFromCamera: true, // 如果需要仅从相机扫码，可以取消注释
					success: function(res) {
						console.log(res, "扫码结果"); // 打印扫码结果，方便调试

						// 获取扫码结果中的 URL
						let url = res.result; // 注意：res.refult 应该是 res.result
						console.log("扫码获取的 URL:", url);

						// 检查 URL 是否存在
						if (url) {
							// 截取 # 之后的内容
							const hashpart = url.split('#')[1] || '';
							const hashpart2 = url.split('=')[1] || '';
							console.log("截取 # 之后的内容:", hashpart);

							// 如果截取到有效内容，跳转到对应页面
							if (hashpart) {
								uni.setStorageSync("quick_pay", hashpart)
								uni.reLaunch({
									url: hashpart
								});
							} else {
								console.error("URL 中没有 # 后的内容");
								uni.showToast({
									title: 'URL 格式不正确',
									icon: 'none'
								});
							}
							if (hashpart2) {
								uni.setStorageSync("pay_code", hashpart2)
							}
						} else {
							console.error("扫码结果中没有 URL");
							uni.showToast({
								title: '扫码失败，请重试',
								icon: 'none'
							});
						}

						// 打印条码类型和内容
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: function(err) {
						console.error("扫码失败:", err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			// clickToggleHandle(ele) {

			// 	const data = {
			// 		...this.tablist[ele.index],
			// 		label: ele.label,
			// 		select: ele.select
			// 	}
			// 	this.tablist[ele.index] = JSON.parse(JSON.stringify(data))

			// },
			getlist() {
				uni.showLoading({
					title: '加载中',
				});
				let data = {
					page: this.page,
					page_size: this.size,
					latitude: this.latitude,
					longitude: this.longitude,
					sort_type: this.types,
					max_distance: this.max_distance,
					classify_id: this.classify_id
				};
				recommendSeller(data).then(res => {
					uni.hideLoading()
					console.log('商品列表', res)
					let list = res.data.data;
					this.goodsList = this.page == 1 ? list : this.goodsList.concat(list);
					console.log(this.goodsList, '商品上哦');
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},
			gonext(index) {
				let data = this.swiperList[index]
				console.log(data);
				uni.navigateTo({
					url: data.url
				})
			},
			getswiperlist() {
				slider().then(res => {
					this.swiperList = res.data
				})
			},
			getbynlist() {
				bynList().then(res => {
					console.log(res, '必应鸟必应鸟');
					// #ifdef H5 
					let array = res.data
					// #endif
					// #ifdef MP-ALIPAY || MP-WEIXIN
					let array = res.data.filter(item => item.platform != 2)
					// #endif
					// 数组长度
					let length = array.length;
					// 计算第一个数组的长度
					let firstArrayLength = Math.ceil(length / 2);
					// 使用 slice 分割数组
					let firstArray = array.slice(0, firstArrayLength);
					let secondArray = array.slice(firstArrayLength);
					this.menuArr.push(firstArray, secondArray)
				})
			},
			sss() {
				let that = this;
				uni.getLocation({
					success: function(res) {
						uni.setStorageSync("latitude", res.latitude)
						uni.setStorageSync("longitude", res.longitude)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.page = 1
						that.getlist()
						console.log(res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let data = {
							lat: res.latitude,
							lng: res.longitude,
						};
						geocoder(data).then(res => {
							console.log('逆解析', res)
							if (res.code == 1) {
								that.cityName = res.data.city
								console.log(that.cityName);
								uni.setStorageSync('cityName', that.cityName)
								uni.setStorageSync('addressInfo', res.data)
							}
						})
					},
					fail: function(res) {
						that.latitude = "39.90"
						that.longitude = "116.41"
						that.cityName = "全国"
						uni.setStorageSync("latitude", that.latitude)
						uni.setStorageSync("longitude", that.longitude)
						// this.obtainAddress()
						that.page = 1
						that.getlist()
						console.log(res, "杀杀杀杀杀杀杀杀杀")
					}
				})
			},
			sel(item) {
				if (item.platform == 2) { //必应鸟
					this.phoneShow = true
					this.bynid = item.id

				} else if (item.platform == 3) { //话费
					uni.navigateTo({
						url: '/pagesMy/groundCat/PhoneBill'
					})
				} else {
					uni.navigateTo({
						url: "/pagesMy/groundCat/groudcatindex?pid=" + item.classify_id
					})
				}
				console.log(item)
			},
			gobynnext() {
				const data = {
					id: this.bynid
				}

				bynDetail(data).then(res => {
					this.phoneShow = false
					if (res.code == 1) {
						// #ifdef H5
						window.location.href = res.data.h5_url
						// #endif
						// #ifdef MP-WEIXIN
						// uni.navigateTo({
						// 	url: res.data.miniapp_url
						// })
						// #endif
						// #ifdef MP-ALIPAY
						// my.ap.openURL({
						// 	url: res.data.h5_url, // 请将 url 替换为有效的页面地址
						// 	success: (res) => {
						// 		console.log('openURL success', res)
						// 	},
						// 	fail: (err) => {
						// 		console.log('openURL success', err)
						// 	}
						// });
						// #endif
					}
					console.log(res);
					// return

				})
			},
			goMerchantHome(id) {
				console.log(11111, id);
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantHomepagew?id=' + id
				})
			},

		},
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		}
	}
</script>

<style scoped lang="scss">
	.ali {
		/* #ifdef MP-ALIPAY */
		margin-top: 30rpx;
		/* #endif */


	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.noticebar_box {
		position: relative;
		width: 750rpx;
		border-radius: 10rpx;
		/* #ifdef H5 */
		// padding-top: 30rpx;
		/* #endif */
		// 
	}

	.noticebar_box>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 224rpx;
	}

	.noticemain {
		position: absolute;
		left: 80rpx;
	}

	.noticeBar {
		position: relative;
		width: 690rpx;
		height: 76rpx;
		margin: 0 auto 24rpx;
		z-index: 2;
		border-radius: 10rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 99%);
		display: flex;
		align-items: center;

	}

	.custom_addrress {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		z-index: 999;
		color: #FFFFFF;
		/* #ifdef MP-ALIPAY */
		margin-left: 30rpx;
		/* #endif */
	}



	.bgss {
		position: absolute;
		width: 750rpx;
	}


	.custom-title-box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		padding-bottom: 10rpx;

		opacity: 1;



		.title-box {
			// background-color: red;
			display: flex;
			// justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #FFFFFF;

			>image {
				width: 346rpx;
				height: 96rpx;
			}

			.left {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 24rpx;
				bottom: 10rpx;
			}
		}
	}


	.sticky_box {
		position: sticky;
		top: 0;
		width: 750rpx;
		// height: 170rpx;
		background: #ffffff;
		z-index: 999;
	}

	.sticky_box>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}




	.sticky_top {
		position: relative;
		width: 750rpx;
		z-index: 9;
		/* #ifdef H5 */
		padding-top: 20rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN||MP-ALIPAY */
		padding-top: 70rpx;
		/* #endif */
	}


	.bar_address {
		display: flex;
		align-items: center;
		// min-width: 160rpx;
		height: 106rpx;
		margin-left: 35rpx;
		position: relative;
	}

	.bar_address>text {
		/* #ifdef MP-WEIXIN  || H5 */
		width: 140rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		max-width: 120rpx;
		margin-right: 5rpx;
		/* #endif */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #333333;
		margin: 0 10rpx;
	}

	.dws {
		width: 22rpx;
		height: 28rpx;
	}

	.bar_input {
		position: relative;
		height: 64rpx;
		background: #ffffff;
		border-radius: 40rpx;
		// margin-left: 6rpx;
	}

	.bar_input::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 70rpx;
		transform: translateX(-50%);
		height: 30rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.sms {
		width: 32rpx;
		height: 30rpx;
		margin-left: 26rpx;
	}

	.camouflage {
		/* #ifdef MP-ALIPAY */
		width: 170rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 240rpx;
		/* #endif */
		/* #ifdef H5 */
		width: 400rpx;
		/* #endif */
		margin-left: 36rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.u-demo-block {
		/* #ifdef MP-WEIXIN */
		position: relative;
		top: 0rpx;
		z-index: 996;
		/* #endif */
		/* #ifdef H5 */
		position: relative;
		z-index: 996;
		top: 0px;
		/* #endif */
		width: 700rpx;
		margin: 0 auto;
		min-height: 294rpx;
		padding-bottom: 10rpx;
		// background: linear-gradient(180deg, #FFFFFF 92%, rgba(255, 255, 255, 0) 100%);
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;
			margin-left: 20rpx;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	.scroll-list__line__item {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.imageswrap {
		width: 690rpx;
		height: 150rpx;

		>image {
			width: 690rpx;
			height: 150rpx;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
		}

	}


	.swipers {
		position: relative;
		width: 690rpx;
		/* #ifdef MP-WEIXIN||MP-ALIPAY */
		margin: 10rpx auto 24rpx;
		/* #endif */

		/* #ifdef H5 */
		margin: 0rpx auto 24rpx;
		/* #endif */
		z-index: 2;
	}

	.zhicang {
		position: relative;
		width: 690rpx;
		margin: 0 auto;
		/* #ifdef MP-WEIXIN||MP-ALIPAY */
		// margin: 10rpx auto 24rpx;
		/* #endif */

		/* #ifdef H5 */
		// margin: 0rpx auto 24rpx;
		/* #endif */
		z-index: 2;
	}

	.swipershop {
		width: 362rpx;
		height: 436rpx;

		/deep/.u-swiper {
			height: 436rpx !important;
		}

		/deep/.u-swiper__wrapper {
			height: 436rpx !important;
		}

		/deep/ .u-swiper__wrapper__item__wrapper__image {
			height: 436rpx !important;
		}
	}

	.shop_right {
		width: 312rpx;
		height: 436rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		image {
			width: 100%;
			height: 208rpx;
		}
	}

	// /deep/.uni-swiper {
	// 	height: 150rpx;
	// }


	.stickys {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
	}


	.tabwrap {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 100;
		justify-content: space-between;
		padding: 0 30rpx;

		.tabitem {
			border-radius: 102rpx 102rpx 102rpx 102rpx;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 76rpx;
		}
	}

	.active {
		// background: #ffc300 !important;
		color: #ffc300 !important;
	}

	.rate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.mainlist {
		width: 690rpx;
		min-height: 230rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		padding-bottom: 30rpx;

		.images {
			margin-top: 20rpx;
			margin-left: 14rpx;
			width: 190rpx;
			height: 190rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.mainright {
			width: 460rpx;
			margin-top: 20rpx;
			margin-left: 20rpx;

			.name {
				width: 420rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #3D3D3D;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏溢出内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */

			}

			.detail {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;

				.wraps {
					width: 420rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: ellipsis;
				}

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.itemss {
				width: 460rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.wrapleft {
					display: flex;
					align-items: center;

					width: 320rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					.tag {
						width: 28rpx;
						height: 28rpx;
						background: rgba(253, 48, 63, 0.6);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.tag2 {
						width: 28rpx;
						height: 28rpx;
						background: #60CAFE;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.tag3 {
						width: 28rpx;
						height: 28rpx;
						background: #FC6414;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.price {
						font-weight: 500;
						font-size: 24rpx;
						color: #E78C4C;
						margin-left: 8rpx;
					}

					.content {
						width: 170rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						margin-left: 10rpx;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏溢出内容 */
						text-overflow: ellipsis;
					}
				}

				.jifen {
					width: 150rpx;
					height: 32rpx;
					background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					line-height: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}


	.scroll-list__line__item {
		width: 120rpx;
		// height: 96rpx;
	}


	.manzeng {
		width: 280rpx;
		height: 36rpx;
		margin-top: 12rpx;
	}

	.scroll-list__line__item__image {
		width: 70rpx;
		height: 70rpx;
	}

	.realName_box {
		width: 680rpx;
	}

	.realName {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		/* #endif */

		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		left: 50%;
		transform: translateX(-50%);
		width: 680rpx;
		height: 88rpx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		z-index: 999;
		padding: 0 26rpx;
	}

	.btn_gb {
		margin-right: 14rpx;
	}

	.realname_txt {
		width: 142rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background: #FFC300;
		font-size: 28rpx;
		color: #332C2B;
		border-radius: 154rpx 154rpx 154rpx 154rpx;
	}

	/deep/ .u-notice-bar {
		margin-left: -30rpx;
		/* #ifdef MP-WEIXIN */
		margin-left: -62rpx;
		/* #endif */
		padding-left: 40rpx;
		z-index: 1;
	}

	/deep/.u-notice__swiper__item__text {
		color: #999 !important;
	}

	/deep/.u-notice-bar {
		border-radius: 16rpx;
	}

	.duanluo1 {
		width: 750rpx;
		height: 300rpx;
		background: pink;
	}

	.duanluo2 {
		width: 750rpx;
		height: 300rpx;
		background: skyblue;
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border: 1rpx solid #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}

	#shopList {
		min-height: calc(100vh - 100px);
	}

	.rateimg {
		width: 30rpx;
		height: 30rpx;
		margin: 6rpx;
	}

	.tagimage {
		width: 126rpx;
		height: 40rpx;
	}
</style>